<template>
  <div class="page-container">
    <!-- 顶部标题 -->
    <div class="header">
       <button class="back-button" @click="goBack" title="返回">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="header-content">
            <h1>{{ pageTitle }}</h1>
        </div>
        <button v-if="showHistoryButton" class="history-button" @click="goToHistory" title="历史记录">
            历史记录
        </button>
        <div v-else class="header-placeholder"></div>
    </div>

    <!-- 加载状态 -->
    <div v-if="isLoading" class="loading-container">
      <div class="loading-spinner"></div>
      <p class="loading-text">AI生成健康建议...</p>
    </div>

    <!-- 建议内容区域 -->
    <div v-else class="content">
      <div v-for="(item, index) in suggestions" :key="index" class="suggestion-card">
        <div class="card-header">
          <h3>{{ item.title }}</h3>
          <van-icon 
            name="volume-o" 
            class="voice-icon" 
            @click="speak(item.content)"
          />
        </div>
        <p class="card-content">{{ item.content }}</p>
      </div>
    </div>

    <!-- 底部导航组件 -->
    <navigation :active-tab="activeTab" @tab-change="handleTabChange" />
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import Navigation from '@/components/Navigation.vue'; // 导入导航组件
import axios from 'axios'; // 导入 axios
import { getItem } from '@/components/Session.vue';

export default {
  components: { // 注册导航组件
    Navigation
  },
  setup() {
    const router = useRouter();
    const route = useRoute(); // 获取当前路由信息，用于获取参数
    const activeTab = ref('advice'); // 底部导航栏的当前活动标签，默认为 'advice'
    const user = getItem("user")
    const isLoading = ref(true); // 添加加载状态

    // --- 计算属性 --- 

    // 判断当前是否正在查看特定日期的记录 (通过路由参数 :date 判断)
    const isViewingSpecificDate = computed(() => !!route.params.date);
    
    // 控制是否显示"历史记录"按钮 (只有在主建议页面显示)
    const showHistoryButton = computed(() => !isViewingSpecificDate.value);

    // 动态设置页面标题 (是"健康建议"还是"记录: YYYY-MM-DD")
    const pageTitle = computed(() => 
      isViewingSpecificDate.value 
        ? `记录: ${route.params.date}` 
        : '健康建议'
    );

    // --- 响应式状态 --- 

    const suggestions = ref([]); // 存储健康建议 (饮食、作息、运动)

    // --- API 请求 --- 

    // 异步函数：获取健康建议
    const fetchSuggestions = async () => {
      isLoading.value = true; // 开始加载
      
      // 构建请求参数
      const requestParams = {
        username: user.username 
      };
      let apiUrl = 'api/chat/suggest'; 

      if (route.query.data!=null) {
        // 如果路由中有日期参数，从路由中获取数据
        const routeData = route.query.data;
        if (routeData) {
          try {
            const parsedData = JSON.parse(routeData);
            suggestions.value = [
              { title: '饮食建议', content: parsedData[0] || '暂无数据' },
              { title: '作息建议', content: parsedData[1] || '暂无数据' },
              { title: '运动建议', content: parsedData[2] || '暂无数据' }
            ];
            isLoading.value = false; // 加载完成
            return;
          } catch (error) {
            console.error('解析路由数据失败:', error);
          }
        }
      }

      // 如果没有日期参数或解析失败，向后端发起请求
      try {
        const response = await axios.get(apiUrl, { params: requestParams });
        console.log(response)

        if (response.data.code === 200 && response.data.data) {
          const data = response.data.data;
          suggestions.value = [
            { title: '饮食建议', content: data[0] || '暂无数据' },
            { title: '作息建议', content: data[1] || '暂无数据' },
            { title: '运动建议', content: data[2] || '暂无数据' }
          ];
        } else if (response.data.code === 409) {
          const message = response.data.message || '今天没有测量数据';
          suggestions.value = [
            { title: '饮食建议', content: message+ '，使用配套设备测量或在首页填写'  },
            { title: '作息建议', content: message+ '，使用配套设备测量或在首页填写'   },
            { title: '运动建议', content: message + '，使用配套设备测量或在首页填写' }
          ];
        } else {
          console.error('获取建议失败:', response.data.message || 'API 返回错误但未提供消息');
          suggestions.value = [
            { title: '饮食建议', content: '获取建议失败' },
            { title: '作息建议', content: '获取建议失败' },
            { title: '运动建议', content: '获取建议失败' }
          ];
        }
      } catch (error) {
        console.error('请求建议 API 时出错:', error);
        suggestions.value = [
          { title: '饮食建议', content: '请求失败' },
          { title: '作息建议', content: '请求失败' },
          { title: '运动建议', content: '请求失败' }
        ];
      } finally {
        isLoading.value = false; // 无论成功失败，都结束加载状态
      }
    };

    // --- 语音合成 --- 

    let synth = null; // 语音合成器实例
    let voices = [];  // 可用语音列表
    
    // 初始化语音合成功能
    const initSpeech = () => {
      // 检查浏览器是否支持 SpeechSynthesis API
      if ('speechSynthesis' in window) {
        synth = window.speechSynthesis;
        // 尝试获取可用的语音列表 (可能是异步的)
        const checkVoices = () => {
          voices = synth.getVoices();
          if (voices.length > 0) {
          } else {
            // 如果语音库尚未加载，监听 onvoiceschanged 事件
            synth.onvoiceschanged = () => {
              voices = synth.getVoices();
              // 移除监听器，避免重复触发
              synth.onvoiceschanged = null; 
            };
          }
        };
        checkVoices(); // 立即尝试获取
      } else {
        console.warn("浏览器不支持语音合成功能。");
      }
    };

    // 语音播报函数
    const speak = (text) => {
      if (!synth) {
        console.warn("语音合成未初始化或初始化失败。");
        return; // 如果未初始化，则不执行播报
      }
      if (!text) {
        console.warn("没有可播报的文本内容。");
        return;
      }
      
      // 创建一个播报实例
      const utterance = new SpeechSynthesisUtterance(text);
      
      // 尝试查找并设置中文语音
      utterance.voice = voices.find(voice => voice.lang.startsWith('zh')) || voices.find(voice => voice.default);
      utterance.lang = 'zh-CN'; // 明确指定语言为中文
      utterance.pitch = 1; // 音调 (0-2, 默认 1)
      utterance.rate = 1;  // 语速 (0.1-10, 默认 1)

      // 如果当前正在播报，先取消
      synth.cancel(); 
      // 开始播报
      synth.speak(utterance);

      utterance.onerror = (event) => {
        console.error('语音播报错误:', event.error);
      };
    };

    // --- 导航与交互 --- 

    // 处理底部导航栏的标签切换事件
    const handleTabChange = (newTab) => {
        activeTab.value = newTab; // 更新当前活动标签
        // 根据切换的标签进行页面跳转
        if (newTab === 'home') {
            router.push('/home'); 
        } else if (newTab === 'mine') {
            router.push('/personal'); 
        } else if (newTab === 'advice') {
            // 如果当前已在 /advice 或 /advice/:date，可能不需要跳转
            // 如果是从 /advice-history 切换回来的，需要导航到 /advice (不带日期)
            if (route.path !== '/advice') { // 避免重复导航
              router.push('/advice');
            }
        }
        // 可以根据需要添加其他标签的导航逻辑
    };

    // 返回上一页或指定页面
    const goBack = () => {
        // 如果当前正在查看特定日期的记录，则返回到历史记录列表页
         if (isViewingSpecificDate.value) {
             console.log('从单条记录返回到历史列表页');
             router.push('/adivicehistoyrecord'); // 使用你在路由中定义的路径
         } 
         // 否则，如果浏览器历史记录中有上一页，则返回上一页
         else if (window.history.length > 1) {
             console.log('返回浏览器历史记录的上一页');
             router.go(-1); 
         } 
         // 如果没有历史记录 (例如直接访问此页面)，则返回到主建议页或首页
         else {
             console.log('无历史记录，返回首页');
             router.push('/'); // 或 router.push('/advice'); 根据你的需求决定
         }
    };

    // 跳转到历史记录页面
    const goToHistory = () => {
        console.log('跳转到历史记录页面');
        router.push('/adivicehistoyrecord'); // 使用你在路由中定义的路径
    };

    // --- 生命周期钩子 --- 

    // 组件挂载后执行
    onMounted(() => {
      // 初始化语音合成
      initSpeech();
      // 获取健康建议 (现在会使用模拟数据)
      fetchSuggestions();
    });

    // --- 返回给模板的数据和方法 --- 
    return {
      activeTab,
      suggestions,
      fetchSuggestions,
      speak,
      handleTabChange,
      goBack,
      goToHistory, 
      showHistoryButton, 
      pageTitle,
      isLoading // 添加加载状态到返回值
    };
  }
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  max-width: 100vw;
  width: 100%;
  background-color: #f8f9fa; /* 匹配主题背景 */
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  padding-bottom: 15vw; /* 为底部导航添加内边距，匹配其高度 */
  box-sizing: border-box;
}

.header {
  background: linear-gradient(135deg, #4CAF50, #2196F3); /* 匹配主题渐变 */
  color: white;
  padding: 4vw; /* 匹配的内边距 */
  display: flex;
  justify-content: space-between; /* 从居中改为 */
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  /* 移除固定高度，高度由内容和内边距调整 */
  box-sizing: border-box;
}

/* Added Back Button Styles (from Family.vue) */
.back-button {
    background: none;
    border: none;
    color: white;
    font-size: 5vw;
    cursor: pointer;
    padding: 2vw;
    margin-left: -2vw; /* 偏移内边距 */
    line-height: 1;
}

.back-button:hover {
    opacity: 0.8;
}

/* Added Header Content Styles */
.header-content {
    text-align: center;
    flex-grow: 1; /* 允许标题占据空间 */
}

.header-content h1 {
  font-size: 4.5vw;
  margin: 0;
  font-weight: 600;
}

/* Added Placeholder Styles (from Family.vue) */
.header-placeholder {
    width: 10vw; /* 匹配返回按钮区域 */
    /* Keep the width, but make it invisible if not needed for layout */
    visibility: hidden; /* Use visibility hidden to maintain layout space */
}

/* Style for the new history button */
.history-button {
    background: none;
    border: none;
    color: white;
    font-size: 3.5vw; /* Adjust size as needed */
    font-weight: 500;
    cursor: pointer;
    padding: 2vw;
    margin-right: -1vw; /* Adjust spacing */
    line-height: 1;
    min-width: 10vw; /* Ensure it has some width */
    text-align: right;
}

.history-button:hover {
    opacity: 0.8;
}

.content {
  flex: 1;
  padding: 4vw;
  overflow-y: auto; /* 允许内容滚动 */
  /* 移除底部内边距，由页面容器处理 */
}

.suggestion-card {
  background: white;
  border-radius: 3vw; /* 一致的圆角 */
  padding: 4vw;
  margin-bottom: 3vw;
  box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.05); /* 一致的阴影 */
  transition: transform 0.2s;
}

.suggestion-card:hover {
  transform: translateY(-0.5vw);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
}

.card-header h3 {
  font-size: 4vw;
  margin: 0;
  color: #333; /* 一致的文本颜色 */
  font-weight: 600;
}

.voice-icon {
  color: #4CAF50; /* 保持绿色用于语音操作 */
  font-size: 5vw;
  cursor: pointer;
  transition: transform 0.2s;
}

.voice-icon:hover {
  transform: scale(1.1);
}

.card-content {
  color: #666; /* 一致的次要文本颜色 */
  font-size: 3.2vw;
  line-height: 1.6;
  margin: 0;
}

/* Removed .bottom-nav and related styles as they are handled by the Navigation component */

/* Responsive Adjustments */
@media screen and (max-width: 320px) {
  .page-container {
    padding-bottom: 18vw; /* 如果导航高度不同，调整较小屏幕的内边距 */
  }
  .header {
      padding: 3vw; /* 调整内边距 */
  }
  .back-button {
      font-size: 6vw; /* 调整大小 */
  }
  .header-content h1 {
      font-size: 5vw;
  }
  .header-placeholder {
      width: 12vw; /* 调整宽度 */
  }
  .content {
    padding: 3vw;
  }
  .suggestion-card {
    padding: 3vw;
    border-radius: 2.5vw;
  }

  .card-header h3 {
    font-size: 3.8vw;
  }

  .voice-icon {
    font-size: 4.5vw;
  }

  .card-content {
    font-size: 3vw;
  }
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10vw;
  min-height: 50vh;
}

.loading-spinner {
  width: 15vw;
  height: 15vw;
  border: 3px solid rgba(76, 175, 80, 0.3);
  border-radius: 50%;
  border-top-color: #4CAF50;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 5vw;
}

.loading-text {
  font-size: 4vw;
  color: #666;
  text-align: center;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 响应式调整 */
@media screen and (max-width: 320px) {
  .loading-spinner {
    width: 18vw;
    height: 18vw;
  }
  
  .loading-text {
    font-size: 4.5vw;
  }
}
</style>




